<template>
	<view class="contain">
		<view class="flex flex-col justify-center items-center photos">
			<view class="flex flex-col justify-center items-center items" v-for="item in imgsList.data" :key="item">
				<view class="bgtitle"><text>昱励画室{{item.classname}}课堂</text></view>
				<view class="img" v-for="(imgobj,index) in item.imgphotos.data" :key="imgobj">
					<image :src="imgobj" mode="widthFix" @click="preViewImage(index,item.classname,item.imgphotos.data)"></image>
				</view>
			</view>
		</view>
		<!-- 自定义遮盖层 -->
		<!-- <view v-if="isPreview" class="title-overlay">{{ currentTitle }}</view> -->
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {  onLoad } from '@dcloudio/uni-app'

onLoad(()=>{
	getFengCai();
});


//图片集合
let imgsList=reactive<any>({data:[]});
let currentTitle=ref(""); // 当前图片的标题
let isPreview=ref(false);

const getFengCai=()=>{
	let paraData={};
	uni.$tools.Reqeust('/api/getFengCai',paraData,'GET').then((res:any)=>{
		console.log('获取课堂风采数据:==>',res);
		if (res.data.code == 200) {
			res.data.rows.forEach(item=>{
				let obj={};
				obj.classname=item.classname;
				obj.imgphotos=reactive<any>({data:[]});
				obj.imgphotos.data=item.imgphotos.replace("[","").replace("]","").split(",");
				// let temp=item.imgphotos.replace("[","").replace("]","").split(",");
				// for(let i=0;i<temp.length;i++){
				// 	obj.imgphotos.data.push(temp[i]);
				// }
				imgsList.data.push(obj);
			});
			console.log("图片对象集合:",imgsList.data)
		}
	})
}


//预览大图
const preViewImage=(index:number,classname:string,imgdatasArr:Array[])=>{
	//currentTitle.value=classname;
	uni.previewImage({
		urls:imgdatasArr,
		current:imgdatasArr[index]
	})
	//isPreview.value=true;
}


</script>

<style lang='scss' scoped>
	@import "fengcai.scss";
</style>